<template>
    <div>
        <!--科室表-->
        <!-- 表头 -->
        <el-card shadow="always">
            <!--面包屑-->
            <div slot="header">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/">医疗服务</a></el-breadcrumb-item>
                    <el-breadcrumb-item>科室管理</el-breadcrumb-item>
                </el-breadcrumb>
                <span style="font-size: 30px;float: left;margin: 20px 10px">科室管理</span>
            </div>

            <!-- 搜索 -->
            <div style="margin-bottom: 20px;margin-left: -10px">
                <h4>查询条件</h4>
                <el-form :inline="true" :model="params" class="demo-form-inline" style="margin-bottom: -20px">
                    <template>
                        <el-form-item label="一级科室:">
                            <el-select v-model="params.firstLevelId" placeholder="请选择">
                                <el-option label="全部" :value=null></el-option>
                                <el-option v-for="n in iDepartments" :key="n.id" :label="n.name"
                                           :value="n.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </template>

                    <el-form-item label="二级科室:">
                        <el-input v-model="params.secondLevelName" clearable placeholder=""
                                  style="width: 140px"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="findByPage" size="medium">查询</el-button>
                        <el-button @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>

        <el-card shadow="always">
            <!-- 表格 -->
            <el-table tooltip-effect="dark" border ref="multipleTable"
                      :data="tableData" @selection-change="handleSelectionChange">

                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="firstLevelName" label="一级科室" align="center"></el-table-column>
                <el-table-column prop="secondLevelName" label="二级科室" align="center"></el-table-column>

                <!-- 操作 -->
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope" style="padding-left: 20px">
                        <el-button type="text" size="small" style="color: green;padding-left: 20px"
                                   @click="updateDialog(scope.row)">编辑二级科室
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>

            <!-- 分页控件 -->
            <el-pagination style="margin-top: 10px;" background @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :page-sizes="[5, 10, 15]"
                           :current-page="params.pageNum"
                           :page-size="params.pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="pageInfo.dataTotal">
            </el-pagination>

            <!-- 添加/修改 -->
            <el-dialog :title="formText" :visible.sync="dialogFormVisible"
                       :before-close="cancelForm" style="margin-top: 80px">
                <el-form style="margin-top: 30px" label-width="180px" :model="form">
                    <el-form-item label="一级科室:">
                        <el-select v-model="form.firstLevelId" placeholder="请选择">
                            <el-option label="全部" :value=null></el-option>
                            <el-option v-for="n in iDepartments" :key="n.id" :label="n.name"
                                       :value="n.id"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="二级科室:">
                        <el-input v-model="form.secondLevelName" clearable style="width: 220px"></el-input>
                    </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" icon="el-icon-search"
                               @click="addSecondLevelDepartment" size="medium">修改</el-button>
                    <el-button @click="cancelForm">关 闭</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>


<script>
    export default {
        name: "department",
        data() {
            return {
                params: {
                    pageNum: 1,
                    pageSize: 5,
                    firstLevelId: null,     //一级科室id
                    secondLevelName: '',   //二级科室名称
                },      //条件查询
                iDepartments: [],    //所有一级科室
                dialogFormVisible: false,    //添加修改弹窗显示控制
                formText: '',        //添加修改弹窗标题
                secondLevelName: '',    //添加修改二级科室名称
                form: {
                    firstLevelId:null,
                    secondLevelName:''
                },        //添加修改对象
                pageInfo: {
                    dataTotal:null
                },    //分页对象
                tableData: [],   //显示数据
                multipleSelection: [],   //复选框
            }
        },
        methods: {
            //复选框
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //页码变更
            handleCurrentChange(val) {
                this.params.pageNum = val;
                this.findByPage();
            },
            //页大小变更
            handleSizeChange(val) {
                this.params.pageSize = val;
                this.findByPage();
            },
            //查询所有一级科室
            findAllIDepartment() {
                this.$axios.get('/ms_department/listFindFirstPId').then(resp => {
                    this.iDepartments = resp.data.data;
                });
            },
            //条件 分页查询
            findByPage() {
                this.$axios.post('/ms_department/findPageByKeyword', this.params).then(resp => {
                    this.pageInfo = resp.data.data;
                    this.tableData = this.pageInfo.list;
                })
            },
            //重置按钮
            resetForm() {
                params = {
                    firstLevelId: null, //一级科室id
                    secondLevelName: ''  //二级科室名称
                }
            },
            //关闭添加修改弹窗，并清空输入框
            cancelForm() {
                this.dialogFormVisible = false;
                this.secondLevelName = '';
                this.form={};
                this.formText='';
            },
            //点击编辑二级科室按钮
            updateDialog(row) {
                this.dialogFormVisible = true;
                this.form = row;
            },
            //点击修改二级科室
            addSecondLevelDepartment() {
                this.formText='';
                let info={
                    id:null,
                    grade:2,
                    name:this.form.secondLevelName,
                    pId:this.form.firstLevelId
                };
                this.$axios.post('/ms_department/update',info).then(resp => {
                    if (resp.data.code===200) this.$message.success('修改成功')
                    else this.$message.error('修改失败')
                });
                this.cancelForm();
            },
        },
        created() {
            this.findAllIDepartment();
            this.findByPage();
        }
    }
</script>


<style scoped>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
    }
</style>